<template>
  <div>

    <el-row>
      <el-col :span="24" id="VenueExamine1">

        <div id="VenueExamine2">

        </div>

        <div style="height: 20px;"></div>
        <el-table :data="page.records" border>

          <el-table-column prop="venueName" label="申请场馆名" width="100">
          </el-table-column>
          <el-table-column prop="venuePhone" label="申请场馆电话" width="115">
          </el-table-column>
          <el-table-column prop="venueAddress" label="申请场馆名" width="125">
          </el-table-column>

          <el-table-column prop="venueLicense" label="申请许可证" width="130">
            <template #default="scope">
              <img :src="scope.row.venueLicense" alt="申请许可证" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>
          <el-table-column prop="venueImg" label="申请场馆照片" width="130">
            <template #default="scope">
              <img :src="scope.row.venueImg" alt="申请场馆照片" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>
          <el-table-column prop="certifyState" label="申请状态" width="90">
            <template slot-scope="scope">
              <template v-if="scope.row.certifyState == 0">
                待审核
              </template>
              <template v-if="scope.row.certifyState == 1">
                已通过
              </template>
              <template v-if="scope.row.certifyState == 2">
                驳回
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="venueDetails" label="申请场馆详情" width="115">
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="105">
          </el-table-column>
          <el-table-column prop="approveTime" label="审批时间" width="110">
          </el-table-column>
          <el-table-column prop="refuseCause" label="驳回原因" width="115">
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="scope">

              <el-button @click="pass(scope.row.certifyId)" v-if="scope.row.certifyState == '0'" type="text"
                size="small">通过</el-button>
              <el-button @click="rejectShow(scope.row.certifyId)"  v-if="scope.row.certifyState == '0'" type="text"
                size="small">驳回</el-button>

            </template>
          </el-table-column>

        </el-table>



        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>



        <el-dialog title="驳回" :visible.sync="rejectIf" style="width:50%;">
          <el-input v-model="rejectRemark" placeholder="请输入原因"></el-input>
          <el-button @click="reject()" type="text" size="small">确认</el-button>
          <el-button @click="closeRejectDialog" type="text" size="small">取消</el-button>
        </el-dialog>






      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "VneueExamineManagement",
    data() {
      return {
        page: {},
        param: {
          certifyState: "",
          pageNum: 1,
          pageSize: 5,
        },
        rejectIf: false,
        rejectRemark: "",
        certifyId: "",
      }
    },
    methods: {

      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllVenueExamine();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllVenueExamine();
      },
      //展示场馆申请入住分页
      loadAllVenueExamine() {
        this.$http.get("/venue/yQualification/pageQualification", {
          params: {
            certifyState: this.param.certifyState,
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      },
      closeRejectDialog() {
          this.rejectIf = false;
        },
      rejectShow(id) {
        this.certifyId = id
        this.rejectIf = true
      },
      reject() {
        this.$http.post("/venue/yQualification/rejectQualification", {
          certifyId: this.certifyId,
          refuseCause: this.rejectRemark
        }).then(resp => {
          if(resp.data.code==200){
            this.rejectIf = false;
          }
         this.loadAllVenueExamine();
        });
      },
      //场馆申请 入住
      pass(certifyId) {
        this.$http.get("/venue/yQualification/passQualification", {
          params: {
            certifyId: certifyId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllVenueExamine();
        });
      }

    },
    created() {
      this.loadAllVenueExamine();
    }
  }
</script>

<style>
  #VenueExamine2 {
    margin-left: -520px;
    line-height: 100%;
    width: 100%
  }

  #VenueExamine1 {
    line-height: 100%;
    width: 100%
  }
</style>
